<template>
  <div class="table-box">
    <!--工具栏-->
    <div class="tool-bar" v-if="showQueryForm">
      <div class="form-tool">
        <el-form
          ref="queryForm"
          class="query-form"
          label-width="0px"
          :model="filters"
          :inline="true"
          @submit.prevent
        >
          <el-form-item
            v-for="item in filterFields"
            :key="item.name"
            :prop="item.prop"
          >
            <component
              :is="'cm-' + (item.type || 'input')"
              v-model="filters[item.prop]"
              v-bind="cleanProp(item, filters)"
              :placeholder="item.label"
              :title="item.label"
              @change="fieldValueChange"
              clearable
            />
          </el-form-item>
          <el-form-item v-if="!noCheckButton">
            <el-button
              type="primary"
              @click="queryPage($event)"
            ><i class="fa fa-search right-icon" />查询</el-button>
          </el-form-item>
          <el-form-item
            v-for="item in activeTableOperators"
            v-show="showOperators"
            :key="item.id"
          >
            <el-button
              :ref="'bn_' + item.id"
              :type="item.buttonClass"
              @click="clickTableButton($event, item)"
            ><i :class="[item.buttonIcon, 'right-icon']" />{{item.name}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-row v-if="tableTitle !== ''">
      <el-col
        :span="24"
        style="text-align: center;font-size: 25px;font-weight:bolder;padding-top:10px"
      >
        <div class="table-title-box">{{tableTitle}}</div>
      </el-col>
    </el-row>
    <!--表格栏-->
    <el-table
      v-loading="props.showLoading && loading"
      element-loading-text="数据加载中..."
      ref="elDataTable"
      :show-overflow-tooltip="true"
      :tooltip-options="{popperClass: 'button-tooltip', placement: 'bottom', offset: 5}"
      tooltip-effect="light"
      class="data-table"
      width="100%"
      :data="tableDataList"
      :row-class-name="rowClassName"
      :default-sort="defaultSort"
      :border="border"
      :stripe="stripe"
      :cell-style="tableCellStyle"
      :cell-class-name="cellClass"
      :sumText="sumText"
      :showSummary="showSummary"
      :summaryMethod="summaryMethod"
      :span-method="spanMethod"
      :header-cell-style="headerCellStyle"
      @selection-change="selectionChange"
      @sort-change="sortChange"
      @row-click="handleRowClick"
    >
      <template #empty>
        <div class="el-table__empty-block">
          <span style="min-width: 100px">暂无数据</span>
        </div>
      </template>
      <el-table-column
        v-if="props.showOperators || props.showCheckBox"
        header-align="center"
        align="center"
        type="selection"
        width="40"
        :show-overflow-tooltip="false"
      ></el-table-column>
      <el-table-column
        v-for="column in calcColumns"
        header-align="center"
        :class-name="(column.edit && column.edit === true) ? 'edit-cell' : 'default-cell'"
        :align="column.align !== undefined ? column.align : 'center'"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :min-width="column.minWidth||0"
        :key="column.prop"
        :type="['selection', 'index', 'expand'].includes(column.type) ? column.type : null"
        :formatter="column.formatter"
        :show-overflow-tooltip="column.tooltip !== false"
        :fixed="column.buttons === undefined ? column.fixed : 'right'"
        :sortable="column.buttons === undefined ? (column.sortable==null?'custom':column.sortable) : false"
      >
        <template v-slot="scope" v-if="column.subCols === undefined">
          <span v-if="column.type === 'index'" style="width: 100%">
            {{ scope.$index + 1 }}
          </span>
          <span
            v-else-if="column.click === true"
            :class="column.click ? 'click-link' : ''"
            :style="column.click ? 'width: 100%' : ''"
            @click="column.click ? handleCellOperator(column.prop, scope.row[column.prop], scope.row) : () => {}"
          >
            <span v-if="column.formatter" style="width: 100%">
              {{ column.formatter
                ? column.formatter(column.prop, scope.row[column.prop],scope.row)
                : scope.row[column.prop] }}
            </span>
            <span v-else-if="column.formatNumber" style="width: 100%">
              {{ tool.formatNumber(scope.row[column.prop], column.formatNumber) }}
            </span>
            <span v-else-if="column.formatterHtml">
              <span v-html="column.formatterHtml(column.prop, scope.row[column.prop], scope.row)" />
            </span>
            <span v-else>
              {{ scope.row[column.prop] }}
            </span>
          </span>
          <span v-if="column.formatter" style="width: 100%">
              {{ column.formatter
                ? column.formatter(column.prop, scope.row[column.prop],scope.row)
                : scope.row[column.prop] }}
            </span>
          <span v-else-if="!column.type">{{ scope.row[column.prop] }}</span>
          <component
            v-else
            :is="'cm-' + (column.type || 'input')"
            v-model="scope.row[column.prop]"
            v-bind="cleanProp(column, scope.row)"
            :showText="true"
          />
        </template>
        <el-table-column
          v-for="subCol in column.subCols"
          header-align="center"
          :class-name="(subCol.edit && subCol.edit === true) ? 'edit-cell' : 'default-cell'"
          :align="subCol.align !== undefined?subCol.align:'center'"
          :prop="subCol.prop"
          :label="subCol.label"
          :width="subCol.width"
          :min-width="subCol.minWidth||0"
          :key="subCol.prop"
          :type="subCol.type"
          :formatter="subCol.formatter"
          :show-overflow-tooltip="column.tooltip !== false"
          :fixed="subCol.buttons === undefined ? subCol.fixed : 'right'"
          :sortable="subCol.buttons === undefined ? (subCol.sortable==null?'custom':subCol.sortable) : false"
        >
          <template v-slot="scope">
            <span v-if="subCol.type === 'index'" style="width: 100%">
              {{ scope.$index + 1 }}
            </span>
            <span
              v-else-if="subCol.click === true"
              :class="subCol.click ? 'click-link' : ''"
              :style="subCol.click ? 'width: 100%' : ''"
              @click="subCol.click ? handleCellOperator(subCol.prop, scope.row[subCol.prop], scope.row) : () => {}"
            >
              <span v-if="subCol.formatter" style="width: 100%">
                {{subCol.formatter
                ? subCol.formatter(subCol.prop, scope.row[subCol.prop],scope.row)
                : scope.row[subCol.prop]}}
              </span>
              <span v-else-if="subCol.formatNumber" style="width: 100%">
                {{ tool.formatNumber(scope.row[subCol.prop], subCol.formatNumber) }}
              </span>
              <span v-else-if="subCol.formatterHtml">
                <span v-html="subCol.formatterHtml(subCol.prop, scope.row[subCol.prop], scope.row)" />
              </span>
              <span v-else>
                {{scope.row[subCol.prop]}}
              </span>
            </span>
            <span v-else-if="!column.type">{{ scope.row[column.prop] }}</span>
            <component
              v-else
              :is="'cm-' + (subCol.type || 'input')"
              v-model="scope.row[subCol.prop]"
              v-bind="cleanProp(subCol, scope.row)"
              :showText="true"
            />
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        v-if="showOperators && activeRowOperators.length > 0"
        header-align="center"
        align="center"
        label="操作"
        fixed="right"
        :width="calcOpMinWidth"
        :show-overflow-tooltip="false"
      >
        <template v-slot="scope">
          <span
            v-for="(item, index) in activeRowOperators"
            :key="index"
            class="button-box"
          >
            <el-tooltip
              v-if="validRowOpShow(item, scope.row)"
              effect="light"
              placement="bottom"
              :enterable="false"
              :show-after="0"
              :hide-after="0"
              :content="item.name"
              popper-class="button-tooltip"
            >
              <el-button
                circle
                :type="item.buttonClass"
                @click.stop="clickRowButton($event, item, scope.row)"
              ><i :class="[item.buttonIcon]" /></el-button>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
      <template v-if="$slots.append" #append>
        <slot name="append"></slot>
      </template>
    </el-table>
    <!--分页栏-->
    <div
      v-if="showPagination"
      class="pagination-box"
    >
      <el-tooltip
        v-if="remark && remark.length > 0"
        class="item"
        effect="light"
        :content="remark"
        placement="top-start"
      >
        <div class="pagination-box-left">
          {{remark}}
        </div>
      </el-tooltip>
      <div class="pagination-box-right">
        <el-pagination
          layout="total, prev, pager, next, jumper, sizes"
          :current-page="pageRequest.pageNumber"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="pageRequest.pageSize"
          :total="data.totalRecord"
          @current-change="refreshPage"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <!--新增/编辑/查看界面-->
    <div>
      <el-dialog
        width="65%"
        class="upload-dialog"
        :append-to-body="true"
        :title="fileTitle"
        v-model:visible="fileVisible"
        :close-on-click-modal="false"
        destroy-on-close
        draggable
      >
        <el-form
          ref="dataForm"
          label-width="120px"
          label-position="right"
        >
          <el-row style="margin-top: 10px;">
            <el-col :span="12">
              <el-form-item label="文件选择" prop="file">
                <el-upload
                  ref="excelUpload"
                  action=""
                  accept=".xls, .xlsx"
                  :multiple="false"
                  :limit="1"
                  :http-request="handleUpload"
                  :show-file-list=false
                  :before-upload="handleBeforeUpload"
                >
                  <el-button :loading="fileLoading" type="primary">Excel数据导入</el-button>
                  <template #tip><div class="el-upload__tip">只能上传xls/xlsx文件</div></template>

                </el-upload>
              </el-form-item>
            </el-col>
            <el-col class="error-text" v-if="errorMsg !== ''" :span="24">
              <div v-html="errorMsg"></div>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button
              size="large"
              @click="fileVisible=false"
              type="info"
            >取消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {ref, nextTick, watch, computed, onMounted} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRoute} from 'vue-router';
import {useRouterStore} from '@/pinia/modules/router';
import api from '@/http/api';
import tool from '@/utils/tool';

const emit = defineEmits([
  'data',
  'handleAfterQuery',
  'resetForm',
  'handleTableSelect',
  'handleRowClick',
  'handleTableOperator',
  'handleAjaxSuccess',
  'handleCellOperator',
  'handleEditChange'
])

const props = defineProps({
  columns: Array, // 表格列配置
  filterFields: Array, // 表格列配置
  pkName: {
    type: String,
    default: 'id'
  }, // 主键ID的字段
  permsEdit: String,  // 编辑权限标识
  permsDelete: String,  // 删除权限标识
  showPagination: {
    type: Boolean,
    default: true
  },
  showOperators: {
    type: Boolean,
    default: true
  },
  showQueryForm: {
    type: Boolean,
    default: true
  },
  showLoading: {
    type: Boolean,
    default: true
  },
  dataUrl: {  // 数据查询URL
    type: String,
    default: ''
  },
  operators: {
    type: Array,
    default: () => []
  },
  dataList: {  // 数据查询URL
    type: Array,
    default: () => []
  },
  tableTitle: {
    type: String,
    default: ''
  },
  align: {  // 文本对齐方式
    type: String,
    default: 'left'
  },
  border: {  // 是否显示边框
    type: Boolean,
    default: true
  },
  stripe: {  // 是否显示斑马线
    type: Boolean,
    default: false
  },
  highlightCurrentRow: {  // // 是否高亮当前行
    type: Boolean,
    default: true
  },
  filters: Object, // 表单查询
  tableCellStyle: { //给列增加样式
    type: Function ,
    default: () => {}
  },
  cellClass:{
    type: Function ,
    default: () => {}
  },
  defaultSort: {
    type: Object,
    default: () => {}
  },
  autoLoadPage: {
    type: Boolean,
    default: true
  },
  showCheckBox:{ //是否显示列表勾选框
    type: Boolean,
    default: false
  },
  opMinWidth: {  // 外部控制高度参数
    type: Number,
    default: 120
  },
  pageSort:{ //是否页面排序
    type: Boolean,
    default: false
  },
  noCheckButton:{ //不显示查询按钮
    type: Boolean,
    default: false
  },
  sumText: {
    type: String,
    default: '合计'
  },
  headerCellStyle: Function,
  spanMethod: Function,
  showSummary: {
    type: Boolean,
    default: false
  },
  summaryMethod: Function,
  checkRowOpShow: {
    type: Function,
    default: null
  },
  tableRowClassName: {
    type: Function,
    default: () => ''
  },
  remark: {
    type: String,
    default: ''
  },
  options: Object,
})

const route = useRoute();
const routerStore = useRouterStore()
const elDataTable = ref()
const excelUpload = ref()
// 操作信息
const operators = ref([])
// 页面查询的url
const queryUrl = ref('')
// 分页信息
const pageRequest = ref({
  pageNumber: 1,
  pageSize: props.filters && props.filters.pageSize || 20
})
const data = ref({
  pageNumber: 1,
  pageSize: 20,
  totalPage: 0,
  totalRecord: 0
})
const tableDataList = ref([])
const loading = ref(false)  // 加载标识
const selections = ref([])  // 选中的列数据
const uploadButton = ref({})
const fileTitle = ref('')
const fileVisible = ref(false)
const fileLoading = ref(false)
const errorMsg = ref('');
const cleanProps = ref(['prop', 'label', 'type', 'table', 'sortable', 'tooltip']);
const filters = ref(props.filters || {});

const cleanProp = (field, json) => {
  let result = {};
  for (let prop in field) {
    if (cleanProps.value.indexOf(prop) < 0) {
      if (typeof field[prop] === 'function') {
        result[prop] = field[prop](json);
      } else {
        result[prop] = field[prop];
      }
    }
  }
  return result;
};

const activeTableOperators = computed(() => {
  return operators.value.filter(operator =>
    operator.buttonLevel && (operator.buttonLevel === '01' || operator.buttonLevel === '99'));
})

const activeRowOperators = computed(() => {
  return operators.value.filter(operator =>
    operator.buttonLevel && (operator.buttonLevel === '02' || operator.buttonLevel === '99'));
})

const calcColumns = computed(() => {
  return props.columns.filter(column => column.table === undefined || column.table === true)
})

const calcOpMinWidth = computed(() => {
  return activeRowOperators.value.length > 2 && props.opMinWidth === 120
    ? activeRowOperators.value.length * 55 : props.opMinWidth;
})

const validRowOpShow = (op, row) => {
  if (!props.checkRowOpShow) {
    return true;
  } else {
    return props.checkRowOpShow(op, row);
  }
}

const fieldValueChange = () => {
  refreshPage(1);
}

// 查询按钮查询
const queryPage = (event) => {
  event.currentTarget.blur();
  refreshPage(1)
}

// 换页刷新
const refreshPage = (pageNumber) => {
  pageRequest.value.pageNumber = pageNumber || 1;
  findPage()
}

// 页面大小改变
const handleSizeChange = (pageSize) => {
  pageRequest.value.pageSize = pageSize
  refreshPage(1)
}

// 排序变更
const sortChange = (column) => {
  if(props.pageSort){
    return true
  } else {
    if (column.order === 'ascending') {
      pageRequest.value.sortField = column.prop
      pageRequest.value.sortType = 'asc'
    } else if (column.order === 'descending') {
      pageRequest.value.sortField = column.prop
      pageRequest.value.sortType = 'desc'
    } else {
      pageRequest.value.sortField = null
      pageRequest.value.sortType = null
    }
    refreshPage(1)
  }
}

// 分页查询
const findPage = () => {
  loading.value = true;
  api.post(queryUrl.value, Object.assign({}, props.filters, pageRequest.value)).then((res) => {
    data.value = res;
    tableDataList.value = res.data;
    pageRequest.value.pageSize = res.pageSize || pageRequest.value.pageSize;
    emit('data', res.data); // 回传表数据
    emit('handleAfterQuery', res.data);
    loading.value = false;
  }).catch(() => {
    loading.value = false
  })
}

// 行选择
const selectionChange = (selectionValues) => {
  selections.value = selectionValues;
  emit('handleTableSelect', selections.value);//返回选择的行数据
}

// 行选择
const handleRowClick = (row) => {
  elDataTable.value.clearSelection()
  elDataTable.value.toggleRowSelection(row)
  emit('handleRowClick', row);
}

const clearSelection = () => {
  elDataTable.value.clearSelection()
}

// 选中高亮
const rowClassName = (row) => {
  let rowName = ""
  if (props.highlightCurrentRow && selections.value.find(s => s[props.pkName] === row.row[props.pkName])) {
    rowName += "el-table__row--striped current-row";
  }

  rowName += ' ' + (props.tableRowClassName(row.row) || '');
  return rowName;
}

// 操作按钮点击事件
const clickTableButton = (event, operator) => {
  if (event) {
    event.currentTarget.blur();
  }

  let selectionValues = null
  if (operator.selectedMode === '2') { // 2 单选(必选)
    if (selections.value.length < 1) {
      ElMessage.warning('请选择一条记录！');
      return;
    } else if (selections.value.length > 1) {
      ElMessage.warning('只能选择一条记录！')
      return;
    }
    selectionValues = selections.value[0]
  } else if (operator.selectedMode === '3') { // 3 多选(可选)
    selectionValues = selections.value
  } else if (operator.selectedMode === '4') { // 4 多选(必选)
    if (selections.value.length < 1) {
      ElMessage.warning('请至少选择一条记录！');
      return;
    }
    selectionValues = selections.value;
  }
  if (operator.buttonType === 'delete' || operator.buttonType === 'ajax') {
    ajaxTodo(operator, selectionValues);
  } else if(operator.buttonType === 'downloadExcel'){
    downloadExcel(operator, selectionValues);
  } else if(operator.buttonType === 'importExcel'){
    importExcel(operator);
  } else {
    emit('handleTableOperator', Object.assign({clickType: 'table'}, operator), selections.value);
  }
}

// 操作按钮点击事件
const clickRowButton = (event, operator, row) => {
  event.currentTarget.blur();

  let selectionValues
  if (operator.selectedMode === '2') { // 2 单选(必选)
    selectionValues = row;
  } else if (operator.selectedMode === '3' || operator.selectedMode === '4') { // 3 多选(可选)
    selectionValues = [row];
  } else {
    selectionValues = row;
  }
  if (operator.buttonType === 'delete' || operator.buttonType === 'ajax') {
    ajaxTodo(operator, selectionValues);
  } else {
    emit('handleTableOperator', Object.assign({clickType: 'row'}, operator), selectionValues);
  }

  clearSelection();
  elDataTable.value.toggleRowSelection(row)
}

// 模板下载
const downloadExcel = (operator,selections) => {
  if (operator.selectedMode === '3' || operator.selectedMode === '4') {
    let params = {}
    if (selections != null && selections.length > 0) {
      let ids = selections.map(item => item[props.pkName]).toString();
      params[props.pkName + 's'] = ids.split(',');
    }
    api.downloadFile(operator.dataDestUrl, params).then((res) => {
      try {
        api.saveFileLocal(res);
      } catch(err) {
        let enc = new TextDecoder('utf-8');
        let res1 = JSON.parse(enc.decode(new Uint8Array(res)));
        ElMessage.error(res1.message);
      }
    });
  } else {
    api.downloadFile(operator.dataDestUrl, props.filters).then((res) => {
      try {
        api.saveFileLocal(res);
      } catch(err) {
        let enc = new TextDecoder('utf-8');
        let res1 = JSON.parse(enc.decode(new Uint8Array(res)));
        ElMessage.error(res1.message);
      }
    });
  }
}

// Excel导入
const importExcel = (operator) => {
  fileTitle.value = operator.name;
  fileVisible.value = true;
  uploadButton.value = operator;
  errorMsg.value = '';
}

const handleUpload = (file) => {
  return new Promise((resolve, reject) => {
    errorMsg.value = '';
    fileLoading.value = true;
    api.uploadFile(
      uploadButton.value.dataDestUrl,
      Object.assign({'file': file.file}, props.filters, props.options)
    ).then((res) => {
      fileLoading.value = false;
      if (res.code === '1') {
        fileVisible.value = false;
        ElMessage.success(res.message);
        findPage();
      } else {
        errorMsg.value = res.message.replace(/@@@/g, '<br/>');
      }
      resolve();
    }).catch(() => {
      fileLoading.value = false;
      reject();
    });

    excelUpload.value && excelUpload.value.clearFiles();
    resolve();
  });
}

const handleBeforeUpload = (file) => {
  let isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    ElMessage.error("上传文件大小不能超过 10MB!");
  }

  return isLt10M;
}

// 删除/ajaxTodo处理操作
const ajaxTodo = (operator, selections) => {
  ElMessageBox.confirm((operator.clickTips || '数据提交，请确认？'), '提示', {type: 'warning'}).then(() => {
    let params = {}
    if (operator.selectedMode === '2') { // 2 单选(必选)
      params[props.pkName] = selections[props.pkName];
    } else if (operator.selectedMode === '3' || operator.selectedMode === '4') { // 3 多选(可选)
      if (selections != null && selections.length > 0) {
        let ids = selections.map(item => item[props.pkName]).toString();
        params[props.pkName + 's'] = ids.split(',');
      }
    }
    loading.value = true;
    api.post(operator.dataDestUrl, params).then(res => {
      ElMessage.success(res.message);
      findPage();
      loading.value = false;
      emit('handleAjaxSuccess', operator, selections);
    }).catch(() => {
      loading.value = false;
    })
  }).catch(() => {});
}

const handleCellOperator = (property, value, row) => {
  emit('handleCellOperator', property, value, row)
}

const doLayout = () => {
  if(elDataTable.value) {
    elDataTable.value.doLayout();
  }
}

const init = () => {
  // 获取本页的操作按钮
  if (props.dataUrl !== '') {
    queryUrl.value = props.dataUrl;

    for(let key in routerStore.routeMap) {
      let menu = routerStore.routeMap[key];
      if (menu?.meta?.url === queryUrl.value) {
        operators.value = menu.meta.buttons || [];
        break;
      }
    }
  } else {
    queryUrl.value = route.meta.url;
    operators.value = route.meta.buttons || [];
  }

  if (operators.value.length === 0) {
    operators.value = props.operators || [];
  }

  if (props.defaultSort && props.defaultSort.prop) {
    if (props.defaultSort.order === 'ascending') {
      pageRequest.value.sortField = props.defaultSort.prop
      pageRequest.value.sortType = 'asc'
    } else if (props.defaultSort.order === 'descending') {
      pageRequest.value.sortField = props.defaultSort.prop
      pageRequest.value.sortType = 'desc'
    } else {
      pageRequest.value.sortField = null
      pageRequest.value.sortType = null
    }
  }

  tableDataList.value = props.dataList || [];

  if (props.autoLoadPage) {
    findPage();
  }
}

const getDataList = () => {
  return tableDataList.value || [];
};

watch(() => props.dataUrl, () => {
  init()
})

watch(() => props.dataList, val => {
  tableDataList.value = val;
})

watch(() => tableDataList.value, () => {
  nextTick(function() {
    setTimeout(doLayout, 500);
  });
});

onMounted(() => {
  init();
});

defineExpose({ findPage, getDataList });
</script>

<style scoped>
.table-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  min-height: 1px;
}
.tool-bar {
  display: inline-block;
  width: 100%;
}
.tool-bar>div{
  display: inline-block;
}
.form-tool {
  float: left;
}
.form-tool .el-form .el-form-item,
.form-tool  .el-form .el-form-item {
  margin-bottom: 5px;
}
.form-tool :deep(.el-input) {
  max-width: 150px;
  text-align: left;
}
.form-tool .el-form--inline .el-form-item {
  margin-right: 10px;
}
.form-tool :deep(.el-date-editor--daterange.el-input__inner) {
  max-width: 250px;
}
.form-tool :deep(.el-range-input) {
  max-width: 120px;
  text-align: left;
}
.click-link {
  color: #0085f6;
  cursor:pointer;
}
.click-link:hover {
  color: #0085f6;
  text-decoration:underline;
}
.operator-button :deep(.el-button) {
  margin-right: 10px;
}
.operator-button :deep(.el-button+.el-button) {
  margin-left: 0;
}
.upload-dialog :deep(.el-dialog__body) {
  padding: 0 40px 0 40px;
}
.el-button--text.danger {
  color: #ec4141;
}
.el-button--text.danger:hover {
  color: #ec4141;
}
.el-button--text.primary {
  color: #378ef0;
}
.el-button--text.primary:hover {
  color: #378ef0;
}
.data-table {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.data-table :deep(td .cell) {
  padding: 0 5px!important;
}
.data-table :deep(td.el-table-column--selection .cell) {
  padding: 0!important;
}
.data-table :deep(td.edit-cell) {
  padding: 0!important;
}
.data-table :deep(td.edit-cell .cell) {
  padding: 0!important;
}
.data-table .button-box :deep(.el-button) {
  margin: 0 5px;
}
.el-table :deep(.first-row) {
  color: #FF9764;
  font-weight: bold;
}
.el-table :deep(.el-table__fixed-right) {
  background: #FFFFFF;
}
.el-table :deep(.el-table__inner-wrapper) {
  flex-grow: 1;
}
.el-table__empty-block {
  display: flex;
  flex-direction: column;
}
.pagination-box {
  margin-top: 10px;
  display: flex;
}
.pagination-box-left {
  font-size: 14px;
  line-height: 32px;
  padding-right: 5px;
  color: red;
  flex: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-align: left;
}
.pagination-box-right {
  max-width: 100%;
  text-align: right;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.pagination-box-right :deep(.el-pagination) {
  padding-right: 0;
}
.pagination-box-right :deep(.el-pagination__editor) {
  margin-right: 8px;
}
.pagination-box-right :deep(.is-last) {
  margin-left: 10px;
  margin-right: 0;
}
</style>
